<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* div{ */
            /* width: 100px;
            height: 100px;
            background-image:linear-gradient(to right bottom,red,pink,cyan); */
            /* 边框 width style color*/
            /* border: 5px solid orange;  */
            /* border-top-style:dashed; */
            /* border-top-color:red; */
            /* 内边距 */
            /* 上下左右内边距都为10px*/
            /* padding: 10px; */
            /* 上下内边距为10px 左右内边距为20px*/
            /* padding: 10px 20px; */
            /* 上内边距为10px 左右内边距为20px 下内边距为30px*/
            /* padding: 10px 20px 30px; */
            /* padding: 10px 20px 30px 40px; */
        /* } */

        div{
            /*设置盒模型*/
            /* 元素默认都是内容盒子 */
            box-sizing: content-box;
            width: 100px;
            height: 100px;
            border: 3px solid red;
            margin: 17px 34px 26px;
            padding: 23px 19px 27px;
        }
        .border{
            /* 设置边框盒子 */
            box-sizing: border-box;
            width: 100px;
            height: 100px;
            background-color:orange;
            border: 2px solid pink;
            margin: 17px 29px 36px;
            padding: 15px 43px 21px;
        }
        /* 盒模型：
            盒子种类：
                 1.内容盒子 标准盒子 w3c盒子 
                    内容盒子计算公式：
                        盒子宽：144px 内容区width100 + 左右内边距19*2 + 左右边框6 
                        盒子高：156px 内容区height100 + 上下内边距23+27 + 上下边框6
                        盒子所占页面宽：212px 盒子宽144 + 左右外边距34*2 
                        盒子所占页面高：199px 盒子高156px + 上下外边距17+26 
                 2.边框盒子 怪异盒子 ie盒子 
                        盒子宽：100px =内容区width（10px） + 左右内边距43*2 + 左右边框4
                        盒子高：100px =内容区height(60px) + 上下内边距15+21 + 上下边框4
                        盒子所占页面宽：158px 盒子宽100 + 左右外边距29*2 
                        盒子所占页面高：153px  盒子高100 + 上下外边距 17 + 36 
            盒子区别？
                width和height区别 
                内容盒子width和height是设置给内容区 边框盒子width和height是设置给盒子本身的
            */
    </style>
</head>
<body>
    <div>内容盒子</div>
    <div class="border">边框盒子</div>
</body>
</html>